import React, { Component } from 'react';
import { Input } from 'slucky';
import Validator from '../../validator';
import { Link } from 'react-router-dom';
require('./login.scss');

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            password: '',
            phoneNumber: '',
            countDownShow: false,
            countDown: 3
        };

        this.Validator = new Validator();
        Validator.types.isPhoneNumber = {
            validate: (value) => {
                return /^1(3|4|5|7|8)\d{9}$/ig.test(value);
            },
            desc: '手机号码格式不正确'
        };
        Validator.types.isEmail = {
            validate: (value) => {
                return /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/ig.test(value)
            },
            desc: '邮箱格式不正确'
        };
        Validator.types.isPassword = {
            validate: (value) => {
                return value.length >= 6 && value.length <= 32;
            },
            desc: '密码的长度必须是 6-32 位'
        };
        this.Validator.config = {
            name: ['isEmpty',],
            password: ['isEmpty', 'isPassword'],
            phoneNumber: ['isEmpty', 'isPhoneNumber']
        };
    }
    handleCountDown = () => {
        const { countDown, countDownShow } = this.state
        if (!countDownShow) {
            let timer = setInterval(() => {
                const con = this.state.countDown - 1
                if (con < 0) {
                    this.setState({
                        countDownShow: false,
                        countDown: 3
                    })
                    clearInterval(timer)
                } else {
                    this.setState({
                        countDown: con
                    })
                }
            }, 1000);
        }
        this.setState({
            countDownShow: true
        })
    }
    handleLogin=()=>{
        this.Validator.isSubmit(this.state);
        this.forceUpdate()
    }
    render() {
        return (
            <div className="d-f ac jc fullscreen bg-login container">
                <div>
                    <div className="login-card d-f s0">
                        <div className="flex1 s0 card card-left c-text-w d-f jc-b fd-c">
                            <div className="flex1">
                                <div className="card-logo">
                                    <img src="" alt="" />
                                    <div>云端软件开发协作平台</div>
                                </div>
                                <div><span>阴明</span><span>掘金创始人</span></div>
                                <p>许多年轻的开发者使用码云共享和协作，码云也是难得的为中国开发者的软件服务。期待未来码云继续发展，成为中国开发行业发展之基石！</p>
                            </div>
                            <div className="s0">
                                码云企业版 - 企业级软件协作开发管理平台
                        </div>
                        </div>
                        <div className="flex1 s0 card bg-w">
                            <div className="d-f jc-b pb24 ai-b">
                                <div className="fs24">登录</div>
                                <div>没有帐号？ <Link to="/signup">点此注册</Link></div>
                            </div>
                            <div>
                                <Input placeholder="手机/邮箱/个人空间地址" type="text" width="100%" value={this.state.name} onChange={(name) => { this.setState({ name }); }} error={() => this.Validator.formatRes('name')} />
                            </div>
                            <div className="mt24">
                                <Input placeholder="密码" type="password" width="100%" value={this.state.password} onChange={(password) => { this.setState({ password }); }} error={() => this.Validator.formatRes('password')} />
                            </div>
                            <div className="mt24">
                                <Input placeholder="手机" type="text" width="100%" value={this.state.phoneNumber} onChange={(phoneNumber) => { this.setState({ phoneNumber }); }} error={() => this.Validator.formatRes('phoneNumber')} />
                            </div>
                            <div className="d-f jc-b ptb16">
                                <div>记住我</div>
                                {this.state.countDown}
                                <button className="btn" disabled={this.state.countDownShow} onClick={this.handleCountDown}>短信验证码</button>
                            </div>
                            <button className="btn-n w-full ptb6" onClick={this.handleLogin}>登录</button>
                            <div className="ta-c pt16">已有帐号，忘记密码？</div>
                            <div className="ta-c pt44">使用 OSChina 帐号登录</div>
                            <div className="ta-c">其他登录方式</div>
                        </div>
                    </div>
                    <div className="c-hint-b ta-c pt50">© Gitee.com 关于我们 使用条款 帮助文档 在线自助服务 重发激活邮件</div>
                </div>
            </div>
        );
    }
}
